<script>
import axios from "axios";

import { getEquipment } from "@/utils/cookies";

export default {
  name: "detection",
  props:{
    sampleInfo:{
      type: Object,
      default: () => ({})
    }
  },
  watch:{
    sampleInfo:{
      handler(val){
        this.resetForm();
        console.log("val",val)
        if(Object.keys(val).length > 0){
          this.form = Object.assign({},val)
          this.form.sampleId = val.id
          // 更新样品编号
          const hfm = this.getHfm()
          this.form.sampleNumbering = this.systemForm.checkTime ? this.systemForm.checkTime + hfm : this.getTime();
        }else{

        }
      },
      immediate: true,
      deep: true,
    },
  },
  data() {
    return{
      apiUrl:{
        unit: '/api/history/hYfindUnit',
        system: '/api/setting/getSetting',
        sampleQrCode: '/check/check/zysw/qrcode',
        qrcode: '/check/qrcode',
        check: '/api/ct/check',
        upload: '/api/aio/hy/upload',
      },
      form:{},
      // 单位
      unitList: [],
      // 系统设置
      systemForm: {},
      // 设备状态定时器
      equipmentStatusTimer: null,
      // 视频加载显示
      videoShow:false,
      videoElement: null,
      // 存储摄像头流对象
      mediaStream: null,
      // 图片显示
      imgShow: false,
      // 截取的图片资源
      imgUrl: '',
      // 截图次数
      cutNum: 5,
    }
  },
  mounted() {
    this.$nextTick(()=>{
      this.getCompetence();
      this.getSystem();
      this.getUnitList();
    })
  },
  methods:{
    // 检测摄像头
    getCompetence() {
      this.$modal.loading("摄像头检测中...");
      try {
        // 兼容性处理：为navigator.mediaDevices添加getUserMedia方法
        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
          navigator.mediaDevices = Object.assign({}, navigator.mediaDevices, {
            getUserMedia: (constraints) =>
                new Promise((resolve, reject) => {
                  const legacyGetUserMedia =
                      navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
                  if (!legacyGetUserMedia) {
                    reject(new Error("浏览器中不支持getUserMedia"));
                  } else {
                    legacyGetUserMedia.call(navigator, constraints, resolve, reject);
                  }
                }),
          });
        }

        const videoElement = document.getElementById("video");
        const constraints = { video: true, audio: false };

        // 获取视频流并处理
        navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
          videoElement.srcObject = stream;

          // 获取新视频流
          this.mediaStream = stream;

          // 播放视频
          videoElement.onloadedmetadata = () => videoElement.play();

          // 获取并打印摄像头列表
          navigator.mediaDevices.enumerateDevices()
              .then(devices => devices.filter(device => device.kind === "videoinput"))
              .then(cameras => console.log(cameras))
              .catch(error => console.error('Error getting camera list:', error));
          this.videoShow = false;
          // // 首次上报设备状态
          // this.setEquipmentStatus();
          // // 启动定时轮询（每分钟上报一次）
          // this.startEquipmentStatusPolling();
          this.$modal.closeLoading();
        }).catch((error) => {
          this.$modal.closeLoading();
          this.$message.error("摄像头未检测到，请重新检测")
          this.videoShow = true
          console.error(`${error.name}: ${error.message}`);
        });
      } catch (error) {
        this.videoShow = true;
        this.$modal.closeLoading();
      }
    },
    // 重新检测摄像头
    retestCamera(){
      this.getCompetence();
    },
    // 获取系统配置信息
    getSystem(){
      this.postApiConfig(this.apiUrl.system).then((res)=>{
        let data = res.data.detectionSetting
        data.originalTime = data.checkTime
        data.checkTime = data.checkTime.replace(/-/g, '');
        this.systemForm = data
      })
    },
    getUnitList(){
      this.postApiConfig(this.apiUrl.unit).then(response => {
        this.unitList = response.data
      });
    },
    resetForm() {
      this.form = {}
    },
    getHfm() {
      const now = new Date();
      const padZero = (num) => num < 10 ? '0' + num : num.toString(); // 统一的补零函数

      // 使用padZero函数简化小时、分钟、秒的格式化
      const formattedHours = padZero(now.getHours());
      const formattedMinutes = padZero(now.getMinutes());
      const formattedSeconds = padZero(now.getSeconds());

      // 生成随机数并转换为字符串
      const randomNum = padZero(Math.floor(Math.random() * 90) + 10);

      // 返回组合后的字符串
      return `${formattedHours}${formattedMinutes}${formattedSeconds}${randomNum}`;
    },
    // 显示截图
    displaySnapshot(imageDataUrl) {
      this.imgShow = true;
      this.imgUrl = imageDataUrl;
    },
    // 校验参数有无填写
    validateFormFields(form) {
      const requiredFields = {
        sampleName: '样品名称',
        unit: '受检单位',
      };
      // 遍历并验证每个必填字段，一旦发现空字段立即提示并终止循环
      for (const key in requiredFields) {
        if (!form[key]) {
          this.$message.error(`${requiredFields[key]}不能为空！`);
          return false; // 发现空字段，立即返回false表示验证未通过，并停止后续验证
        }
      }
      return true; // 没有发现空字段，表示所有必填项都已填写，验证通过
    },
    // 开始检测
    async detectionBtn() {
      // let base64 = "";
      //
      // const projectInfo = await this.detectSampleQrCode(base64);
      //
      // console.log("projectInfo",projectInfo)

      // return false;

      if (this.videoShow) {
        this.$message.error("摄像头未检测到，请重新检测");
        return false;
      }

      // 验证表单字段
      if (!this.validateFormFields(this.form)) {
        console.log("表单验证未通过，操作终止。");
        return false;
      }

      // 显示加载提示
      this.$modal.loading("正在检测中，请稍后...");
      // 这里先加载一张显示在页面
      const video = this.$refs.videoPlayer;
      const canvas = this.$refs.canvas;
      const context = canvas.getContext('2d');

      // 设置canvas尺寸与视频尺寸一致
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;

      // 将视频当前帧绘制到canvas上
      context.drawImage(video, 0, 0, canvas.width, canvas.height);

      // 将canvas内容转换为dataURL
      const imageDataUrl = canvas.toDataURL('image/png');

      // 显示截图
      this.displaySnapshot(imageDataUrl.split(",")[1]);

      this.imageDataUrlArr = [];
      let currentIndex = 0;

      // 定义一个递归函数来逐帧捕获并延迟插入数组
      const captureAndDelay = () => {
        if (currentIndex >= this.cutNum) {
          // 所有帧处理完毕后调用校验参数方法
          this.changeResult(this.imageDataUrlArr[this.imageDataUrlArr.length - 1]);
          console.log("imageDataUrlArr", this.imageDataUrlArr);
          return;
        }

        const video = this.$refs.videoPlayer;
        const canvas = this.$refs.canvas;
        const context = canvas.getContext('2d');

        // 设置canvas尺寸与视频尺寸一致
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;

        // 将视频当前帧绘制到canvas上
        context.drawImage(video, 0, 0, canvas.width, canvas.height);

        // 将canvas内容转换为dataURL
        const imageDataUrl = canvas.toDataURL('image/png');

        // 将处理后的dataURL推入数组
        this.imageDataUrlArr.push(imageDataUrl.split(",")[1]);

        // 递归调用自身，实现每帧之间的延迟
        setTimeout(() => {
          currentIndex++;
          captureAndDelay();
        }, 500);
      };

      // 启动帧捕获及延迟插入的递归过程
      captureAndDelay();
    },
    // 获取检查项目信息
    detectSampleQrCode(imageDataUrl) {
      return this.postApiConfig(this.apiUrl.sampleQrCode,{base64: imageDataUrl})
    },
    // 检测结果
    async changeResult(imageDataUrl) {
      console.log("开始处理结果");
      try {
        let base64 = "";

        const projectInfo = await this.detectSampleQrCode(imageDataUrl);
        console.log("projectInfo",projectInfo)
        if(Number(projectInfo.code) === 500){
          this.$message.error(projectInfo.msg);
          this.$modal.closeLoading();
          return false
        }
        this.form = Object.assign({}, this.form, projectInfo.data,{ name: projectInfo.data.projectName});
        console.log(" this.form", this.form)
        await this.performDetectionOperations(imageDataUrl);
      } catch (error) {
        this.$modal.closeLoading();
        console.error("处理过程中发生错误:", error);
      }
    },
    // 检测二维码
    detectQRCode(imageDataUrl){
      return this.postApiConfig(this.apiUrl.qrcode,{base64: imageDataUrl})
    },
    // 执行检测操作
    async performDetectionOperations(imageDataUrl) {
      // 检测二维码
      if (this.systemForm.isCheckQrCode) {
        const qrCodeResponse = await this.detectQRCode(imageDataUrl);
        console.log("二维码检测结果",qrCodeResponse)
        if(qrCodeResponse.code == 200){
          this.$forceUpdate()
          this.form.qrKey = qrCodeResponse.data.qrKey;
        }else{
          this.$modal.closeLoading();
          this.$message.error(qrCodeResponse.msg);
          return false
        }
      }
      // 检测试剂卡结果
      await this.reagentCard();
    },
    // 检测试剂卡结果
    reagentCard(){
      // 参数
      let data = {
        projectId: this.form.projectId,
        detectionMethod: 1,
        images: this.imageDataUrlArr,
        qrKey: this.form.qrKey,
      }

      console.log("检测参数",data)
      this.postApiConfig(this.apiUrl.check,data).then((res)=>{
        console.log(res)
        this.$forceUpdate()
        if(res.code == 200){
          let data = res.data
          this.cardResult = data;
          console.log("cardResult",this.cardResult)
          this.form = Object.assign({}, this.form, data[0]);
          this.uploadProvince();
        }else{
          this.$modal.closeLoading();
          // 更新样品编号
          const hfm = this.getHfm()
          this.form.sampleNumbering = this.systemForm.checkTime ? this.systemForm.checkTime + hfm : this.getTime();
          this.$message.error(res.msg);
        }
      }).catch(()=>{
        this.$modal.closeLoading();
      })
    },
    // 特定格式的随机时间字符串
    getTimeRandom() {
      const current = new Date();
      const formattedDate = `${current.getFullYear().toString().slice(-2)}${addZero(current.getMonth() + 1)}${addZero(current.getDate())}`;
      const randomNumber = Math.floor(Math.random() * (99999999 - 10000000 + 1)) + 10000000;
      const result = `BS_${formattedDate}${randomNumber}`;
      return result;
      function addZero(num) {
        return num < 10 ? '0' + num : num;
      }
    },
    getCurrentTimeString() {
      const now = new Date();
      const hours = now.getHours().toString().padStart(2, '0');
      const minutes = now.getMinutes().toString().padStart(2, '0');
      const seconds = now.getSeconds().toString().padStart(2, '0');

      return `${hours}:${minutes}:${seconds}`;
    },
    // 检测结果-格式化
    roundToTwoDecimals(num) {
      return parseInt(num * 100)/100;
    },
    formatNumberStr(value) {
      const decimalPart = value.toString().split('.')[1];
      if (decimalPart && decimalPart.length > 3) {
        return this.roundToTwoDecimals(value);
      } else {
        return value;
      }
    },
    formattedBeforeRes(value) {
      if (value === '' || Number.isNaN(parseFloat(value))) {
        return '';
      }
      const num = parseFloat(value);
      if (!isNaN(num)) {
        return this.formatNumberStr(num);
      }
      return '';
    },
    // 辅助函数
    prepareUploadPayload() {
      const batchSn = this.getTimeRandom();

      let projectList = this.cardResult.map(item => ({
        ocrImage: item.ocrImage,
        grayImage: item.grayImage,
        cValue: this.formattedBeforeRes(item.c),
        tValue: this.formattedBeforeRes(item.t),
        projectName: item.projectName,
        projectId: item.projectId,
        result: item.decideOutcome,
        resultValue: this.formattedBeforeRes(item.afterRes),
        serialNumber: this.sampleNumbering
      }));

      return {
        batchSn, // 检测批次
        qrKey: this.form.qrKey, // 二维码编号
        projectId: this.form.projectId, // 项目ID
        projectName: this.form.name, //项目名称
        sampleId: this.form.sampleId, //样品ID
        sampleName: this.form.sampleName, //样品名称
        sampleNumber: this.form.sampleNumbering, //样品编号
        sampleType: this.form.type, //样品类型
        judgeName: '', // 判断名称
        detectionMethod: 1, // 检测方法 1：比色法，2：消线法
        checkTime: this.systemForm.originalTime + ' ' + this.getCurrentTimeString(), // 检测时间
        projectList: projectList, // 检测数据详情
        inspectedUnit: this.form.unit, // 检测单位
        channel: 2, // 1：app，2：pc
        equipmentSn: getEquipment(), // 设备编号
        isCheckQrCode: true, // 是否检测二维码
      };
    },
    // 上传检测记录
    async uploadProvince() {
      try {
        // 准备上传数据
        const uploadPayload = this.prepareUploadPayload();
        console.log("上传参数",uploadPayload)
        // this.$modal.closeLoading();
        // return false;

        // 上传检测记录
        const uploadResponse = await this.postApiConfig(this.apiUrl.upload, uploadPayload);
        this.uploadResult = uploadResponse.data;

        // 关闭加载提示
        this.$modal.closeLoading();
        // 根据上传结果决定后续操作
        if (uploadResponse.code === 200) {
          // 更新样品编号
          const hfm = this.getHfm()
          this.form.sampleNumbering = this.systemForm.checkTime ? this.systemForm.checkTime + hfm : this.getTime();
          this.$message.success("上传成功！")
        } else {
          this.$message.error(uploadResponse.msg)
        }
      } catch (error) {
        this.$message.error('上传过程中发生错误')
        console.error("上传过程中发生错误:", error);
        // 确保任何错误情况下都关闭加载提示
        this.$modal.closeLoading();
      }
    },
    /**
     * 设备在线状态上报
     */
    setEquipmentStatus() {
      this.postApiConfig('/api/common/onLine', { equipmentSn: getEquipment() }).then((res) => {
        console.log('设备状态上报成功', res)
      }).catch(err => {
        console.error('设备状态上报失败', err)
      })
    },
    /**
     * 启动设备状态轮询
     */
    startEquipmentStatusPolling() {
      // 先清除已有定时器
      this.clearEquipmentStatusPolling()

      // 设置新的定时器（1分钟间隔）
      this.equipmentStatusTimer = setInterval(() => {
        this.setEquipmentStatus()
      }, 60 * 1000)
    },
    /**
     * 清除设备状态轮询
     */
    clearEquipmentStatusPolling() {
      if (this.equipmentStatusTimer) {
        clearInterval(this.equipmentStatusTimer)
        this.equipmentStatusTimer = null
      }
    },
    /**
     * 释放摄像头资源
     */
    releaseCamera() {
      const videoElement = document.getElementById("video");
      if (videoElement) {
        console.log('释放摄像头资源-1')
        videoElement.pause();
        videoElement.srcObject = null;
      }

      if (this.mediaStream) {
        console.log('释放摄像头资源-2')
        this.mediaStream.getTracks().forEach(track => track.stop());
        this.mediaStream = null;
      }
    },
  },
  beforeDestroy() {
    console.log("兽残-组件销毁时清除定时器")
    this.clearEquipmentStatusPolling();
    this.releaseCamera();
  },
  deactivated() {
    console.log("兽残-如果是keep-alive缓存的组件，使用deactivated钩子")
    this.clearEquipmentStatusPolling();
    this.releaseCamera();
  }
}
</script>

<template>
  <div class="detection-page">
    <div class="detection-parameter">
      <div class="detection-parameter-item">
        <div class="detection-parameter-item-title">
          <span>样品名称:</span>
        </div>
        <div class="detection-parameter-item-box input">
          <span>{{ form.sampleName }}</span>
        </div>
      </div>
      <div class="detection-parameter-item">
        <div class="detection-parameter-item-title">
          <span>项目名称:</span>
        </div>
        <div class="detection-parameter-item-box input">
          <span>{{ form.name }}</span>
        </div>
      </div>
      <div class="detection-parameter-item">
        <div class="detection-parameter-item-title">
          <span>受检单位:</span>
        </div>
        <div class="detection-parameter-item-box unit">
          <el-select v-model="form.unit" placeholder="请选择受检单位" clearable filterable style="width: 100%;">
            <el-option v-for="(item,index) in unitList" :key="index" :label="item" :value="item">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="detection-parameter-item">
        <div class="detection-parameter-item-title">
          <span>试剂卡编号:</span>
        </div>
        <div class="detection-parameter-item-box input">
          <span>{{ form.qrKey }}</span>
        </div>
      </div>
      <div class="detection-parameter-item">
        <div class="detection-parameter-item-title">
          <span>样品类型:</span>
        </div>
        <div class="detection-parameter-item-box input">
          <span>{{ form.type }}</span>
        </div>
      </div>
      <div class="detection-parameter-item">
        <div class="detection-parameter-item-title">
          <span>样品编号:</span>
        </div>
        <div class="detection-parameter-item-box input">
          <span>{{ form.sampleNumbering }}</span>
        </div>
      </div>
      <div class="detection-parameter-item">
        <div class="detection-parameter-item-title">
          <span>检测判定:</span>
        </div>
        <div class="detection-parameter-item-box input"
             :class="{
             'result-adopt': form.decideOutcome === '合格',
             'result-not-passed': form.decideOutcome === '不合格',
             'result-invalid': form.decideOutcome === '无效'
            }">
          <span>{{ form.decideOutcome }}</span>
        </div>
      </div>
      <div class="detection-parameter-item">
      </div>
    </div>
    <div class="detection-video">
      <div class="detection-video-left">
        <div class="detection-video-left-title">
          <span style="display: inline-block;width: 19px;height: 19px;background-color: #0062C4;"></span>
          <span>
            胶体金实时检测图像
          </span>
        </div>
        <div class="detection-video-left-video">
          <video id="video" ref="videoPlayer" style="width: 100%; height: 100%; object-fit: fill;"></video>
          <!-- 隐藏的canvas元素，用于绘制视频帧 -->
          <canvas ref="canvas" style="display: none;"></canvas>
        </div>
      </div>
      <div class="detection-video-right">
        <div class="detection-video-right-title">
          <span style="display: inline-block;width: 19px;height: 19px;background-color: #0062C4;"></span>
          <span>
            胶体金检测图像
          </span>
        </div>
        <div class="detection-video-right-video">
          <!-- 隐藏的img元素，用于展示截图 -->
          <img v-if="imgShow" :src="'data:image/png;base64,' + imgUrl" style="width: 100%;height: 100%;object-fit: fill;" alt="胶体金检测图像">
        </div>
      </div>
    </div>
    <div class="btnBox">
      <div class="resetBox">
        <el-button type="warning" plain @click="retestCamera" v-if="videoShow">重新检测摄像头</el-button>
      </div>
      <div class="detectionMethod">

      </div>
      <div class="btn">
        <el-button type="primary" plain @click="detectionBtn">开始检测</el-button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import "./detection.css";
.detection-page{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.3125rem  /* 5/16 */ 0;

  .detection-parameter{
    width: 100%;
    padding: 0.3125rem;  /* 5/16 */
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列 */
    gap: 0.625rem; /* 10/16 */
    align-items: flex-start;

    .detection-parameter-item{
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 0.4375rem; /* 7/16 */

      .detection-parameter-item-title{
        font-weight: bolder;
        font-size: 1rem  /* 16/16 */;
        color: #000000;
        width: 6.25rem  /* 100/16 */;
        height: 1.875rem  /* 30/16 */;
        display: flex;
        align-items: center;
      }

      .detection-parameter-item-box{
        //width: 100%;
        flex: 1;
        height: 2.5rem  /* 40/16 */;
        border-radius: 0.3125rem  /* 5/16 */;
        font-weight: 400;
        font-size: 1rem  /* 16/16 */;
        display: flex;
        justify-content: space-around;
        align-items: center;
        gap: 0 10px;
        cursor:pointer;
      }

      .input{
        border: 1px solid #E4E7ED;
        background-color: #F5F7FA;
        color: #C0C4D5;
      }

      .result-adopt{
        color: #67c23a;
        background-color: #FFFFFF;
      }
      .result-not-passed{
        color: #fe0000;
        background-color: #FFFFFF;
      }
      .result-invalid{
        color: #C0C4D5;
        background-color: #FFFFFF;
      }

      .sample{
        border: 1px solid #D3D3D3;
        background-color: #ffffff;
        color: #C0C4D5;
        border-radius: 0.3125rem  /* 5/16 */;
        padding: 0 10px;

        .text{
          flex: 1;
          text-align: center;
        }
        .active-text{
          color: #333333;
        }
        .icon{
          width: 22px;
          height: 12px;
          display: flex;
        }
      }
      .value{
        border: 1px solid #D3D3D3;
        background-color: #F5F7FA;
        color: #333333;
        border-radius: 0.3125rem  /* 5/16 */;
        padding: 0 10px;
        .text{
          flex: 1;
          text-align: center;
        }
        .tipStr{
          width: 3.75rem  /* 60/16 */;
          text-align: center;
        }
      }

      .radio{
        border: none;
        background-color: #ffffff;
      }
    }
  }

  .detection-video{
    margin-top: 1.25rem  /* 20/16 */;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0 0.625rem  /* 10/16 */;

    .detection-video-method{
      width: 9.375rem  /* 150/16 */;
      height: 100%;
      padding: 0.3125rem  /* 5/16 */;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.3125rem  /* 5/16 */ 0;
      /* 添加这一行以允许仅Y轴滚动 */
      overflow-y: auto;

      /* 下面是自定义滚动条样式，主要针对Webkit内核浏览器 */
      scrollbar-width: thin; /* Firefox */
      //scrollbar-color: rgba(0, 0, 0, 0.4) rgba(255, 255, 255, 0.2); /* Firefox */

      &::-webkit-scrollbar {
        width: 8px; /* 宽度 */
      }

      &::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1); /* 轨道颜色 */
      }

      &::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.4); /* 滑块颜色 */
        border-radius: 4px; /* 圆角 */
      }

      &::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.6); /* 鼠标悬停时滑块颜色 */
      }


      .detection-video-method-item{
        width: 100%;
        height: 2.5rem  /* 40/16 */;
        box-sizing: border-box;
        border-radius: 0.625rem  /* 10/16 */;
        background-color: #fcfcfc;
        box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
        text-align: center;
        line-height: 2.5rem  /* 40/16 */;
        font-weight: 400;
        font-size: 1rem  /* 16/16 */;
        color: #333333;
        cursor: pointer;
        transition: transform 0.3s ease; /* 0.3秒为过渡持续时间，ease为过渡速度曲线 */

        &:hover{
          transform: translateY(-0.1875rem  /* -3/16 */);
        }
      }
      .activateItem{
        background-color: #eef6ff;
        color: #0062c4;
        border: 1px solid #0062c4;
      }
    }

    .detection-video-left{
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.625rem  /* 10/16 */ 0;

      .detection-video-left-title{
        display: flex;
        align-items: center;
        gap: 0 0.625rem  /* 10/16 */;
        font-weight: 400;
        font-size: 1.125rem  /* 18/16 */;
        color: #666666;
      }
      .detection-video-left-video{
        width: 22.5rem  /* 360/16 */;
        height: 22.5rem  /* 360/16 */;
        background: #000000;
        display: flex;
        justify-content: center;
        align-items: center;

        #video{
          transform: rotate(-90deg);
        }
      }
      .detection-btn-left{
        width: 22.5rem  /* 360/16 */;
        display: flex;
        justify-content: center;
      }
    }
    .detection-video-right{
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.625rem  /* 10/16 */ 0;

      .detection-video-right-title{
        display: flex;
        align-items: center;
        gap: 0 0.625rem  /* 10/16 */;
        font-weight: 400;
        font-size: 1.125rem  /* 18/16 */;
        color: #666666;
      }
      .detection-video-right-video{
        //width: 360px;
        //height: 360px;
        width: 22.5rem  /* 360/16 */;
        height: 22.5rem  /* 360/16 */;
        background: #000000;
        display: flex;
        justify-content: center;
        align-items: center;

        img{
          transform: rotate(-90deg);
        }
      }
      .detection-btn-right{
        width: 22.5rem  /* 360/16 */;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0 3.5rem  /* 56/16 */;
      }
    }
  }

  .btnBox{
    margin-top: 1.25rem  /* 20/16 */;
    //width: 90%;
    width: 53.125rem  /* 850/16 */;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .resetBox{
      width: 140px;
    }

    .detectionMethod{
      width: 18.75rem  /* 300/16 */;
      height: 2.5rem  /* 40/16 */;
    }

    .btn{
      width: 25.625rem  /* 410/16 */;
      height: 2.5rem  /* 40/16 */;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 2.5rem  /* 40/16 */;
    }
  }


}
</style>
